<html>
    <title></title>
    <meta charset="UTF-8">

    <body>
        this is vue page.
        <div id="VueTest">
            用户名：<input type="text" id="username" v-model="username">
            密码：<input type="text" id="age" v-model="age">
            <button v-on:click="createUser">{{buttonValue}}</button>
            <button v-on:click="changeUserName">修改用户名</button>
            <button v-on:click="delUser">删除用户名</button>

            <span v-if="spanFlag">hello everyone!</span>

            <ul>
                <li v-for="user in users"> {{user.username}} --- {{user.age}}</li>
            </ul>

            <span>用户数: {{users.length}} 人</span>
        </div>


    </body>

    <script src="/js/vue.js"></script>

    <script>
        new Vue({
            el : '#VueTest',
            data : {
                buttonValue : '创建用户',
                spanFlag : false,
                users : [
                    {username : 'tom', age : 10},
                    {username : 'jack', age : 20},
                    {username : 'bob', age : 30},
                ],

                username : '',
                age : ''
            },

            beforeCreate :function() {
                console.log('--------beforeCreate----------');
            },
            created : function() {
                console.log('--------created----------');
            },

            beforeMount : function() {
                console.log('--------beforeMount----------');
            },

            mounted : function() {
                console.log('--------mounted---------');
            },

            updated : function() {
                console.log('--------updated---------');
            },

            beforeUpdate : function() {
                console.log('--------beforeUpdate---------');
            },

            methods : {
                createUser : function () {
                    alert('xxxxxxxxxxxxx usernmae=' + this.username + ' age=' + this.age);
                    var user = {
                        username :  this.username,
                        age : this.age
                    };
                    this.users.push(user);
                },

                changeUserName :  function () {
                    this.username += 'xxxxx';
                },
                delUser : function () {
                    this.users.pop();
                }
            }
        })

        function abc() {
            alert('9999999');
        }

    </script>
</html>